<template>
  <view class="container">
    <u--form
        labelPosition="left"
        :model="formData"
        :rules="rules"
        ref="uForm"
        labelWidth="100"
        :labelStyle="{'align-self': 'start', 'font-size': '14px'}"
    >
      <module-card title="电站基本信息">
        <u-form-item
            label="项目编码"
            prop="formData.field"
            borderBottom
            ref="item1"
        >
          XD1566465
        </u-form-item>
        <u-form-item
            label="项目名称"
            prop="formData.field"
            borderBottom
            ref="item1"
        >
          项目名称A
        </u-form-item>
        <u-form-item
            label="经销商名称"
            prop="formData.field"
            borderBottom
            ref="item1"
        >
          经销商A
        </u-form-item>
        <u-form-item
            label="经销商电话"
            prop="formData.field"
            borderBottom
            ref="item1"
        >
          0551-12345678
        </u-form-item>
        <u-form-item
            label="租户姓名"
            prop="formData.field"
            borderBottom
            ref="item1"
        >
          张某某
        </u-form-item>
        <u-form-item
            label="身份证号码"
            prop="formData.field"
            borderBottom
            ref="item1"
        >
          123456789123456789
        </u-form-item>
        <u-form-item
            label="联系电话"
            prop="formData.field"
            borderBottom
            ref="item1"
        >
          130123456789
        </u-form-item>
        <u-form-item
            label="租户地址"
            prop="formData.field"
            borderBottom
            ref="item1"
        >
          合肥市潜山路蔚蓝商务大厦xxxxxx
        </u-form-item>
        <u-form-item
            label="安装方式"
            prop="formData.field"
            borderBottom
            ref="item1"
        >
          安装方式
        </u-form-item>
        <u-form-item
            label="屋顶类型"
            prop="formData.field"
            borderBottom
            ref="item1"
        >
          砖瓦
        </u-form-item>
        <u-form-item
            label="朝向角度"
            prop="formData.field"
            borderBottom
            ref="item1"
        >
          30度
        </u-form-item>
        <!--居中的收起按钮-->
        <view>
          <u-button
              type="primary"
              size="small"
              @click="show = !show"
              style="margin: 0 auto; display: block;"
          >{{show ? '收起' : '展开'}}</u-button>
        </view>

        <u-form-item
            label="安装组件规格"
            prop="formData.field"
            borderBottom
            ref="item1"
        >
          18W
        </u-form-item>
        <u-form-item
            label="安装组件块数"
            prop="formData.field"
            borderBottom
            ref="item1"
        >
          5
        </u-form-item>
        <u-form-item
            label="实际安装容量"
            prop="formData.field"
            borderBottom
            ref="item1"
        >
          25W
        </u-form-item>
      </module-card>

      <module-card title="验收标准及相关图片">
        <view class="form-item-title">逆变器、GPRS模块、组件条码、实际组件串线图</view>
        <u-row
            justify="space-between"
            gutter="10"
            class="border-bottom"
        >
          <u-col span="6">
            <u-form-item
                :label="null"
                prop="formData.field"
                ref="item1"
            >
              <view>
                <u-upload
                    :fileList="fileList5"
                    @afterRead="afterRead"
                    @delete="deletePic"
                    name="5"
                    multiple
                    :maxCount="1"
                ></u-upload>
                <view class="form-item-subtitle"><text class="required">*</text>逆变器铭牌照片</view>
              </view>
            </u-form-item>
          </u-col>
          <u-col span="6">
            <u-form-item
                :label="null"
                prop="formData.field"
                ref="item1"
            >
              <view>
                <u-upload
                    :fileList="fileList5"
                    @afterRead="afterRead"
                    @delete="deletePic"
                    name="5"
                    multiple
                    :maxCount="1"
                ></u-upload>
                <view class="form-item-subtitle"><text class="required">*</text>通讯模块铭牌照片</view>
              </view>
            </u-form-item>
          </u-col>
        </u-row>
        <u-row
            justify="space-between"
            gutter="10"
            class="border-bottom"
        >
          <u-col span="6">
            <u-form-item
                :label="null"
                prop="formData.field"
                ref="item1"
            >
              <view>
                <u-upload
                    :fileList="fileList5"
                    @afterRead="afterRead"
                    @delete="deletePic"
                    name="5"
                    multiple
                    :maxCount="1"
                ></u-upload>
                <view class="form-item-subtitle"><text class="required">*</text>组件穿串线图</view>
                <view class="form-item-subtitle">（可手工绘图或CAD截图）</view>
              </view>
            </u-form-item>
          </u-col>
          <u-col span="6">
            <u-form-item
                :label="null"
                prop="formData.field"
                ref="item1"
            >
              <view>
                <u-upload
                    :fileList="fileList5"
                    @afterRead="afterRead"
                    @delete="deletePic"
                    name="5"
                    multiple
                    :maxCount="1"
                ></u-upload>
                <view class="form-item-subtitle"><text class="required">*</text>组件铭牌照片（必填）</view>
              </view>
            </u-form-item>
          </u-col>
        </u-row>

        <u-form-item
            label="符合各应用场景支架安装标准"
            prop="formData.field"
            borderBottom
            ref="item1"
            labelPosition="top"
            labelWidth="100%"
        >
          <view class="upload-wrap">
            <u-upload
                :fileList="fileList5"
                @afterRead="afterRead"
                @delete="deletePic"
                name="5"
                multiple
                :maxCount="1"
            ></u-upload>
            <view class="form-item-subtitle">配重块照片/背拉照片/立柱固定方式照片/框架固定照片</view>
            <view class="form-item-subtitle">最多4张</view>
          </view>
        </u-form-item>

        <u-form-item
            label="支架整体照片"
            prop="formData.field"
            borderBottom
            ref="item1"
            labelPosition="top"
            labelWidth="100%"
        >
          <view class="upload-wrap">
            <u-upload
                :fileList="fileList5"
                @afterRead="afterRead"
                @delete="deletePic"
                name="5"
                multiple
                :maxCount="1"
            ></u-upload>
            <view class="form-item-subtitle">支架安装完毕整体照片（最多两张)</view>
          </view>
        </u-form-item>

        <u-form-item
            label="符合逆变器及并网箱箱设备接线、系统接地要求"
            prop="formData.field"
            ref="item1"
            labelPosition="top"
            labelWidth="100%"
        >
          <view class="upload-wrap">
            <u-upload
                :fileList="fileList5"
                @afterRead="afterRead"
                @delete="deletePic"
                name="5"
                multiple
                :maxCount="1"
            ></u-upload>
            <view class="form-item-subtitle"><text class="required">*</text>逆变器、并网箱整体安装照片/并网箱打开照片(共两张)</view>
          </view>
        </u-form-item>
        <u-form-item
            :label="null"
            prop="formData.field"
            ref="item1"
            labelPosition="top"
            labelWidth="100%"
        >
          <view class="upload-wrap no-margin">
            <u-upload
                :fileList="fileList5"
                @afterRead="afterRead"
                @delete="deletePic"
                name="5"
                multiple
                :maxCount="1"
            ></u-upload>
            <view class="form-item-subtitle"><text class="required">*</text>接地极照片/组件接地/支架接地(共三张)</view>
          </view>
        </u-form-item>
        <u-form-item
            :label="null"
            prop="formData.field"
            borderBottom
            ref="item1"
            labelPosition="top"
            labelWidth="100%"
        >
          <view class="upload-wrap no-margin">
            <u-upload
                :fileList="fileList5"
                @afterRead="afterRead"
                @delete="deletePic"
                name="5"
                multiple
                :maxCount="2"
            ></u-upload>
            <view class="form-item-subtitle"><text class="required">*</text>组串电压测试照片(不少于两回路)(不低于俩张)</view>
          </view>
        </u-form-item>


        <u-form-item
            label="周边无树木、高大建筑及附属物遮挡(能清晰数出组件数量)"
            prop="formData.field"
            borderBottom
            ref="item1"
            labelPosition="top"
            labelWidth="100%"
        >
          <view class="upload-wrap">
            <u-upload
                :fileList="fileList5"
                @afterRead="afterRead"
                @delete="deletePic"
                name="5"
                multiple
                :maxCount="1"
            ></u-upload>
            <view class="form-item-subtitle"><text class="required">*</text>电站安装完毕整体照片(最多两张)</view>
          </view>
        </u-form-item>

      </module-card>

      <module-card title="验收结论(区域技术工程师填写)">
        <u-form-item
            label="验收结论"
            prop="userInfo.sex"
            borderBottom
            ref="item1"
        >
          <u-textarea
              v-model="formData.field"
              disabled
              disabledColor="#ffffff"
              placeholder="请输入并网箱"
              border="none"
          >
          </u-textarea>
        </u-form-item>
        <u-form-item
            label="整改意见"
            prop="userInfo.sex"
            borderBottom
            ref="item1"
        >
          <u-input
              v-model="formData.field"
              disabled
              disabledColor="#ffffff"
              placeholder="请输入并网箱"
              border="none"
          >
          </u-input>
        </u-form-item>
      </module-card>
    </u--form>
    <!--<fixed-footer>-->
    <!--  <u-button-->
    <!--      type="primary"-->
    <!--      class="footer-btn"-->
    <!--  >提交验收</u-button>-->
    <!--</fixed-footer>-->
  </view>
</template>

<script>
import ModuleCard from "../module-card/index.vue";
import FixedFooter from "../fixed-footer/index.vue";
// import UTextarea from "../../../uni_modules/uview-ui/components/u-textarea/u-textarea.vue";
// import UFormItem from "../../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";
// import UForm from "../../../uni_modules/uview-ui/components/u-form/u-form.vue";
// import UButton from "../../../uni_modules/uview-ui/components/u-button/u-button.vue";


export default {
  name: "index",
  components: {FixedFooter, ModuleCard},
  data() {
    return {
      show: false,
      formData: {
        field: "",
      },
      rules:  {}
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.upload-wrap{
  margin: 15px 0 0;
}
.container{
  padding-bottom: 70px;
}
.form-item-title{}
.form-item-subtitle{
  font-size: 12px;
  color: #666;
  margin-top: 0px;
  .required{
    color: #ff0000;
    margin-right: 2px;
  }
}
.border-bottom{
  border-bottom: 1px solid #e8e8e8;
}
.mb-10{
  margin-bottom: 10px;
}
.no-margin{
  margin-top: 0px !important;
}
.footer-btn{
  margin: 0 0px;
  width: 100%;
}
</style>
